<!--  -->
<template>
  <div>
    <my-header :showBack="true" :title="$t('lang.register')"   />
    <div class="register">
      <div class="left_or_right">
        <div @click="registerData.type=1">
          <img class="register_icon" src="../../assets/img/login/register_icon_left.png" alt="">
          <span>{{$t("lang.leftarea")}}</span>
          <img v-if="registerData.type==1" class="icon_selected" src="../../assets/img/login/register_selected.png" alt="">
        </div>
        <div @click="registerData.type=2">
          <img class="register_icon" src="../../assets/img/login/register_icon_right.png" alt="">
          <span>{{$t("lang.rightarea")}}</span>
          <img v-if="registerData.type==2" class="icon_selected" src="../../assets/img/login/register_selected.png" alt="">
        </div>
      </div>
      <ol>
        <li class="van-hairline--bottom border_top ">
          <div class="contry" @click="showCountry()"><input type="text" v-model.trim="regCountry"   :data-id="registerData.countryId" disabled="disabled" :placeholder="$t('lang.countryExch')"><i class="iconfont icon-arrow-right1"></i></div>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='number'">
          <div class="idnumber">
            <input type="text" v-model.trim="registerData.phone"  :placeholder="exchPlaceTip">
            <div class="exchemail">
              <p  v-show="accountType=='number'" ><i class="iconfont icon-qiehuanzhanghao"></i><span>{{$t("lang.PhoneTel")}}</span></p>
            </div>
          </div>
        </li>
        <li class="van-hairline--bottom"  v-show="accountType=='email'">
          <div class="idnumber">
            <input type="text" v-model.trim="registerData.phone"  :placeholder="exchPlaceTip">
            <div class="exchemail">
              <p ><i class="iconfont icon-qiehuanzhanghao"></i><span>{{$t("lang.Umail")}}</span></p>
            </div>
          </div>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='number'">
          <div><input type="text" v-model.trim="registerData.code" :placeholder="$t('lang.InputPlaceholder')"></div>
          <em v-if="!sendDisabled" @click="getSmsCode">{{$t("lang.PhoneCode")}}</em>
          <em v-if="sendDisabled">{{time}}s</em>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='email'">
          <div><input type="email" v-model.trim="registerData.code" :placeholder="$t('lang.InputPlaceholder')"></div>
          <em v-if="!sendDisabled" @click="sendMail">{{$t("lang.UmailCode")}}</em>
          <em v-if="sendDisabled">{{time}}s</em>
        </li>
        <li class="van-hairline--bottom">
          <div><input type="text" v-model.trim="registerData.customerNumber" :placeholder="$t('lang.youraccount')"></div>
          <p class="cse_green">{{seeName}}</p>
        </li>
        <li class="van-hairline--bottom">
          <div><input :type="passwordType" v-model.trim="Onepassword"  :placeholder="$t('lang.yourloginpass')"></div>
          <i class="iconfont icon-eye-close si24" v-if="passwordType=='password'" @click="showPassword"></i>
          <i class="iconfont icon-eye-open si24" v-if="passwordType=='text'" @click="showPassword"></i>
        </li>
        <li class="van-hairline--bottom">
          <div><input :type="passwordType" v-model.trim="registerData.password"  :placeholder="$t('lang.Repactloginpass')"></div>
          <i class="iconfont icon-eye-close si24" v-if="passwordType=='password'" @click="showPassword"></i>
          <i class="iconfont icon-eye-open si24" v-if="passwordType=='text'" @click="showPassword"></i>
        </li>
        <!-- 安全密码 -->
        <li class="van-hairline--bottom">
          <div><input :type="passwordpType" v-model.trim="OnepayPass"  :placeholder="$t('lang.enterSpword')"></div>
          <i class="iconfont icon-eye-close si24" v-if="passwordpType=='password'" @click="showPayPassword"></i>
          <i class="iconfont icon-eye-open si24" v-if="passwordpType=='text'" @click="showPayPassword"></i>
        </li>
        <li class="van-hairline--bottom">
          <div><input :type="passwordpType" v-model.trim="registerData.payPass"  :placeholder="$t('lang.repctPayWoed')"></div>
          <i class="iconfont icon-eye-close si24" v-if="passwordpType=='password'" @click="showPayPassword"></i>
          <i class="iconfont icon-eye-open si24" v-if="passwordpType=='text'" @click="showPayPassword"></i>
        </li>
        <!-- 推荐人 节点人 -->
        <li class="van-hairline--bottom">
          <div><input type="text" v-model.trim="registerData.recommendPhone"  :placeholder="$t('lang.RefAcc')"></div>
        </li>
        <li class="van-hairline--bottom">
          <div><input type="text" v-model.trim="registerData.parentPhone"  :placeholder="$t('lang.contNunber')"></div>
        </li>
        <li class="name_p"> 
          <div><p>{{setLectName}}</p></div>
        </li>
      </ol>
      
      <div class="account_btn">
        <van-button type="primary" size="large" @click="register">{{$t("lang.register")}}</van-button>
      </div>
    </div>
    <!-- 选择国家弹出层 -->
    <van-popup class="xy_popup" v-model="qrPopup"  position="right" :overlay="false">
            <my-header :showBack="true"  :title="$t('lang.countryExch')"  ></my-header>
            <div class="setbi_box">
              <div class="info_bibox" >
                <ul>
                  <li v-for="item in counteryceList" :key="item.index" class="conteyli" @click="setCounName(item)">
                    <p>{{item.countryName}}</p>
                    <i class="iconfont icon-arrow-right1"></i>
                  </li>
                </ul>
              </div>
              </div>  
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import header from "@/components/header";
export default {
  components: {
    "my-header": header
  },
  data () {
    return {
      time: 60, // 发送验证码倒计时
      sendDisabled: false,
      exchPlaceTip:this.$t('lang.telPlaceholder'),
      accountType:"number",
      qrPopup:false,
      registerData:{
        type:'1',
        customerNumber:'',
        phone :'',
        code :'',
        password :'',
        payPass :'',
        recommendPhone :'',
        parentPhone :'',
        countryId:"",
      },
      Onepassword:"",
      OnepayPass:'',
      payPass:"",
      regInfo:{},
      propData:"",
      counteryceList:[],
      regCountry:"",
      passwordType:"password",
      passwordpType:"password",
      setLectName:"",
      hqPhone:"",
      seeName:'',
    };
  },
  watch:{
    '$route'(val,oldval){
      if(oldval.fullPath.indexOf('?')!=-1){
        this.qrPopup = false;
        this.bilistProp = false;
      }
      if(val.fullPath.indexOf('?qrPopup')!=-1){
        this.qrPopup = true;
      }
      if(val.fullPath.indexOf('?bilistProp')!=-1){
        this.bilistProp = true;
      }
    },
    inputName(val){
      console.log(val);
    },
    regCountry(){
      if(this.regCountry=="中国"){
        this.accountType = 'number';
        this.exchPlaceTip=this.$t('lang.telPlaceholder');
      }else{
        this.accountType = 'email';
        this.exchPlaceTip=this.$t('lang.putMailNum');
      }
    },
    'registerData.recommendPhone': {
      handler(newName, oldName) {
        // ...
        if(this.registerData.recommendPhone!=''){
          console.log(this.registerData.recommendPhone);
          // Toast({ message: "请输入正确的手机号码", position: "bottom"});
          this.selectInfoByAccount();
          return;
        }else{
          this.setLectName="";
        }
        
      },
      deep: true,
      immediate: true,
    },
    'registerData.customerNumber': {
      // 注册昵称验证
      handler(newName, oldName) {
        // ...
        if(this.registerData.customerNumber!=''){
          console.log(this.registerData.customerNumber);
          // Toast({ message: "请输入正确的手机号码", position: "bottom"});
          this.selectInfoByName();
          return;
        }else{
          this.seeName="";
        }
      },
      deep: true,
      immediate: true,
    }
  },
  mounted(){
    this.regInfo=this.$route.params.phone;
    const parInfo=JSON.parse(this.regInfo) ;
    // this.registerData.recommendPhone=parInfo.recommendPhone;
    this.registerData.recommendPhone='';
    this.registerData.parentPhone=parInfo.parentPhone;
    
  },

  methods: {
    // 切换
    showIdword(){
      if(this.accountType == 'number'){
        this.accountType = 'email';
        this.exchPlaceTip=this.$t('lang.putMailNum');
      }else{
        this.accountType = 'number';
        this.exchPlaceTip=this.$t('lang.telPlaceholder');
      }
    },
    //发送验证码
    getSmsCode() {
      if (this.$validator.isPhone(this.registerData.phone)) {
        this.$ajax(this.$api.getSmsCode, {phone: this.registerData.phone,smsType: 1})
          .then(res => {
            if (res.code == 0) {
              Toast({message: "短信发送成功！",position: "bottom"});
              let vm = this;
              vm.sendDisabled = true;
              let interval = window.setInterval(function() {
                if ((vm.time--) <= 0) {
                  vm.time = 60;
                  vm.sendDisabled = false;
                  window.clearInterval(interval);
                }
              }, 1000);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast({message: "请检查手机号码是否输入正确！",position: "bottom"});
      }
    },
    //发送邮箱验证码POST /api/common/sendMail
    sendMail() {
      if (this.$validator.isEmail(this.registerData.phone)) {
        this.$ajax(this.$api.sendMail, {mailAddress: this.registerData.phone,mailType: 1})
          .then(res => {
            if (res.code == 0) {
              Toast({message: "邮箱验证码发送成功！",position: "bottom"});
              let vm = this;
              vm.sendDisabled = true;
              let interval = window.setInterval(function() {
                if ((vm.time--) <= 0) {
                  vm.time = 60;
                  vm.sendDisabled = false;
                  window.clearInterval(interval);
                }
              }, 1000);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast({message: "请检查邮箱是否输入正确！",position: "bottom"});
      }
    },
    register(){
      if(!this.registerData.countryId){
        Toast({message: "请选择国家！",position: "bottom"});
        return;
      } 
      if(!this.registerData.customerNumber){
        Toast({message: "请填写用户名！",position: "bottom"});
        return;
      }else if(this.registerData.customerNumber.length>15){
        Toast({message: "用户名最多10位字符！",position: "bottom"});
        return;
      }
      if (!this.$validator.isRegNumber(this.registerData.customerNumber)) {
        Toast({
          message: "请填写4-12位数字或字母组成的登录账号！",
          position: "bottom",
          duration: 3000
        });
        return;
      }
      // if(!this.$validator.isPhone(this.registerData.phone)){
      //   Toast({message: "请填写正确的手机号码！",position: "bottom"});
      //   return;
      // }
      if(!this.registerData.code){
        Toast({message: "请填写验证码！",position: "bottom"});
        return;
      }
      // 密码
      if (!this.$validator.isPassword(this.Onepassword)) {
        Toast({message: "请填写6-12位数字或字母组成的登录密码！",position: "bottom",duration: 3000});
        return;
      } 
      if(this.registerData.password!=this.Onepassword){
        Toast({message: "两次登录密码输入不一致，请重新输入",position: "bottom"});
        this.registerData.password="";
        return;
      }
      if (!this.$validator.isPassword(this.OnepayPass)) {
        Toast({message: "请填写6-12位数字或字母组成的安全密码！",position: "bottom",duration: 3000});
        return;
      } 
      if(this.registerData.payPass!=this.OnepayPass){
        Toast({message: "两次安全密码输入不一致，请重新输入",position: "bottom"});
        this.registerData.payPass="";
        return;
      }
      if(!this.registerData.recommendPhone){
        Toast({message: "请填写推荐人账号！",position: "bottom"});
        return;
      } 
      // else if(!this.$validator.isPhone(this.registerData.recommendPhone)){
      //   Toast({message: "请填写正确的推荐人账号！",position: "bottom"});
      //   return;
      // }
      if(!this.registerData.parentPhone){
        Toast({message: "请填写接点人账号！",position: "bottom"});
        return;
      } 
      // else if(!this.$validator.isPhone(this.registerData.parentPhone)){
      //   Toast({message: "请填写正确的接点人账号！",position: "bottom"});
      //   return;
      // }
      // this.registerData.phone=this.registermail;
      this.$ajax(this.$api.register, this.registerData).then(res => {
        if (res.code == 0) {
          Toast({message: '注册成功！请及时完善信息，并激活账户',position: "bottom"});
          // this.$router.replace('/login');
          this.$router.replace('/myTeam');
        }else{
          Toast({message: res.msg,position: "bottom"});
        return;
        }
      })
    },
    showCountry(item){
      if(window.location.href.indexOf('?qrPopup')==-1){
        window.location.href = window.location.href+'?qrPopup';
      }
      this.qrPopup = true;
      console.log(item)
      // getCountry
      this.$ajax(this.$api.getCountry,).then(res => {
        if (res.code == 0) {
          this.counteryceList=res.msg;
        }else{
          Toast({message: res.msg,position: "bottom"});
        return;
        }
      })
    },
    setCounName(item){
      this.regCountry=item.countryName;
      this.registerData.countryId=item.id;
      console.log(this.registerData.countryId);
      
      this.qrPopup = false;
    },
    // 显示密码
    showPassword(){
      if(this.passwordType == 'password'){
        this.passwordType = 'text';
        console.log(321);
      }else{
        this.passwordType = 'password';
      }
    },
    showPayPassword(){
      if(this.passwordpType == 'password'){
        this.passwordpType = 'text';
        console.log(321);
      }else{
        this.passwordpType = 'password';
      }
    },
    selectInfoByAccount(){
       //查询用户信息
      this.$ajax(this.$api.selectInfoByAccount,{id:this.registerData.recommendPhone}).then(res=>{
          console.log(res.code);
          
          if (res.code === 0 && res.msg){
            // Toast({ message: "查询成功", position: "bottom"});
              if(res.msg.trueName==undefined){
                this.setLectName="未在平台注册";
              }else if(res.msg.trueName==""){
                this.setLectName="未实名认证";
              }else{
                this.setLectName="姓名为:"+res.msg.trueName;
              } 
          }else{
              this.setLectName="提示：此账号未在平台注册或输入错误";
            }
        })
    },
    selectInfoByName(){
      //查询注册用户
      this.$ajax(this.$api.selectInfoByAccount,{id:this.registerData.customerNumber}).then(res=>{
          console.log(res.code);
          
          if (res.code === 0 && res.msg){
            // Toast({ message: "查询成功", position: "bottom"});
              if(res.msg.trueName==undefined){
                this.seeName="未注册";
              }else if(res.msg.trueName==""){
                this.seeName="未认证";
              }else{
                this.seeName="姓名为:"+res.msg.trueName;
              } 
          }else{
              this.seeName="未注册";
            }
        })
    }
  }
}

</script>
<style lang='less' scoped>
.register{
  background: #fff;
  .left_or_right{
    display: flex;
    background: #fefefe;
    padding: 10px;
    div{
      flex: 1;
      background: #fff;
      box-shadow: 0 0 3px 3px #fafafa;
      border-radius: 4px;
      line-height: 50px;
      position: relative;
      &:last-child{
        margin-left: 10px;
      }
      span{
        vertical-align: middle;
        margin-left: 15px;
      }
      .register_icon{
        width: 20px;
        margin-left: 15px;
      }
      .icon_selected{
        width: 30px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  ol{
    padding: 0 10px;
    li{
      padding: 10px 0 8px;
      display: flex;
      div{
        flex: 1;
        input{
          line-height: 20px;
          border: none;
          width: 100%;
          margin: 5px;
          box-sizing: border-box;
          color: #666;
          background: transparent;
        }
      }
      em{
        flex: 1;
        line-height: 30px;
        max-width: 80px;
        color: #3653d5;
        text-align: center;
      }
    }
  }
  .account_btn{
    margin: 20px 0 30px 0;
    padding: 0 10px;
  }
  .agreement_box{
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    margin: 10px 0;
    span{
      color: #3653d5;
    }
  }
}
.contry{
  display: flex;
  i{font-size: 20px;}
  }
  // 账号切换
  .idnumber{display: flex;}
.register .exchemail{border: 1px solid #999999; }  
.register  .exchemail  p{color: #999999;font-size: 14px;width:80px!important;line-height: 30px;height: 30px;}
.register  .exchemail i{font-size: 15px!important;padding: 0 5px}
.register  .exchemail span{font-size: 14px!important;line-height: 20px;height: 20px;}
// 
.xy_popup{
  width: 100%;
  height: 100%;
  .xy_box{
    padding: 20px 12px;
    box-sizing: border-box;
    border-radius: 0px;
  }
  .xy_boxbg{
    padding: 20px 20px 40px 20px;
    background: #ffffff;
  }
}
// 
.conteyli{border-bottom: 1px solid #eeeeee;display: flex;justify-content:space-between;align-items:center ;height: 40px;
  box-sizing: border-box;padding: 0 12px;
}
.border_top{border-top: 1px solid #eeeeee;}
.transfer_accounts_tip {
  font-size: 12px;
  color: #d20000;
  margin: 15px   15px 0 15px;
  p{line-height: 24px;}
}
.si24{font-size: 26px;}
.name_p{
  p{color: #d20000;height: 20px;}
}
</style>